<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="height: 2000px;">
		<style>
			#box1 {
				width: 300px;
				height: 300px;
				background-color: #93D1FF;
			}
			#box2 {
				width: 200px;
				height: 200px;
				background-color: #e9ffa1;
			}
			#box3 {
				width: 100px;
				height: 100px;
				background-color: #ffa04c;
			}
		</style>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		<script>
			window.onload = function() {
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				bind(box1, "click", function(){
					alert("this is box1")
				})
				bind(box2, "click", function(){
					alert("this is box2")
				})
				bind(box3, "click", function(){
					alert("this is box3")
				})
				
				
			}
			function bind(obj, eventStr, callBack) {
				if (obj.addEventListener) {
					obj.addEventListener(eventStr, callBack, false)
				} else {
					obj.attachEvent("on" + eventStr, function(){
						callBack.call(obj);
					})
				}
			}
		</script>
	</body>
</html>
